<template>
  <div
    class="box-from-border"
    :class="[disabled ? 'disabled' : '', globalSize]"
    :style="{ minHeight, cursor: disabled ? 'not-allowed' : isClick ? 'pointer' : 'auto' }"
    @click="emit('click', $event)"
  >
    <slot>
      <span v-if="text">{{ text }}</span>
      <span v-else style="color: var(--el-text-color-placeholder)">{{ placeholder }}</span>
    </slot>
  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue';
  const props = defineProps({
    /** #组件的尺寸 */
    size: { type: String as PropType<$GlobalSize | undefined>, default: undefined },
    /** #是否禁用 */
    disabled: { type: Boolean, default: false },
    /** #显示的文本 */
    text: { type: [String, Number], default: '' },
    /** 占位文本 */
    placeholder: { type: [String, Number], default: '' },
    /** 最小高度 */
    minHeight: { type: String, default: undefined },
    /** 是否点击 */
    isClick: { type: Boolean, default: false },
  });
  defineSlots<{
    /** 主体内容 */
    default: () => void;
  }>();
  const emit = defineEmits<{
    (e: 'click', event: MouseEvent): void;
  }>();

  const globalSize = computed(() => props.size || useGlobalStore().globalSize);
  const minHeight = computed(() => props.minHeight || `var(--el-component-size${globalSize.value === 'default' ? '' : `-${globalSize.value}`})`);
</script>

<style lang="scss" scoped>
  .box-from-border {
    @include flex(row, nowrap, flex-start, center, center);
    width: 100%;
    padding: 0 7px;
    font-size: var(--my-change-base12-2x-size);
    color: var(--el-input-border-color, var(--el-text-color-regular));
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;

    &.large {
      padding: 0 12px;
    }

    &.default {
      padding: 0 10px;
    }

    &.small {
      padding: 0 8px;
    }

    &:hover {
      box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
    }

    &.disabled {
      color: $c-disabled-text;
      cursor: not-allowed;
      background: $c-disabled-bg;
      box-shadow: 0 0 0 1px var(--el-border-color-light) inset;

      &:hover {
        box-shadow: 0 0 0 1px var(--el-border-color-light) inset;
      }
    }
  }
</style>
